<template>
<div class="detail">

  <detail-navbar @itemindex="itemClick" ref="nav"></detail-navbar>

<BScroll class="content"  ref="scroll" @contentposition="position">
  <detail-swrper :showImages="topImage"></detail-swrper>
  <detail-baseinfo :goodsInfo="GoodsInfo"></detail-baseinfo>
  <detail-shopinfo :shopinfo="ShopInfo"></detail-shopinfo>
  <detail-images :detailimages="DetailImages" id="datailimages" @imagesload="more"></detail-images>
  <item-params ref="params" :Itempatrams="ItemParams" ></item-params>
  <detail-commoninfo ref="common" :detaile-commoninfo="DetailCommonInfo"></detail-commoninfo>
  <detail-recommend ref="recommend" :recommend="GetRecommend"></detail-recommend>
</BScroll>
  <detail-bottombar @addCart="addcart"></detail-bottombar>
  <back-top @click.native="backtop"></back-top>

</div>
</template>

<script>
import DetailNavbar from "@/view/detail/ChildNavbar/DetailNavbar";
import {getdetail,Goods,Detail,Params} from '@/network/detail.js';
import DetailSwrper from "@/view/detail/ChildNavbar/DetailSwrper";
import DetailBaseinfo from "@/view/detail/ChildNavbar/DetailBaseinfo";
import BScroll from "@/components/common/scroll/BScroll";
import DetailShopinfo from "@/view/detail/ChildNavbar/DetailShopinfo";
import DetailImages from "@/view/detail/ChildNavbar/DetailImages";
import ItemParams from "@/view/detail/ChildNavbar/ItemParams";
import DetailCommoninfo from "@/view/detail/ChildNavbar/DetailCommoninfo";
import {getRecommend} from '@/network/home'
import DetailRecommend from "@/view/detail/ChildNavbar/DetailRecommend";
import BackTop from "@/components/common/BckTop/BackTop";
import DetailBottombar from "@/view/detail/ChildNavbar/DetailBottombar";

export default {
  name: "DetailShow",
  data () {
    return {
      iid:null,
      currentIndex:null,
      topImage:[],
      GoodsInfo:{},
      ShopInfo:{},
      DetailImages:{},
      ItemParams:{},
      DetailCommonInfo:{},
      GetRecommend:[],
      narbarback:[]
    }
  },
  components:{
    DetailNavbar,
    DetailSwrper,
    DetailBaseinfo,
    BScroll,
    DetailShopinfo,
    DetailImages,
    ItemParams,
    DetailCommoninfo,
    DetailRecommend,
    BackTop,
    DetailBottombar
  },
  created() {   //获取参数
    this.iid = this.$route.params.iid
    getdetail(this.iid).then( res =>{
      // console.log(res);
      const data = res.result;
      // console.log(data);
      this.topImage=data.itemInfo.topImages;
      //获取img数据
     console.log(this.topImage);
     //商品信息存储
     this.GoodsInfo =new  Goods(data.itemInfo,data.columns,data.shopInfo.services,)
      console.log(this.GoodsInfo);
      // 展示传过来的iteminfo中的数据

      //获取商店信息
       this.ShopInfo = data.shopInfo
      // console.log(this.ShopInfo);

      //获取详细信息
      this.DetailImages = new Detail(data.detailInfo.desc,data.detailInfo.detailImage)
      // console.log(this.DetailImages);
      // 获取参数
      this.ItemParams = new Params(data.itemParams);
      // console.log(this.ItemParams);

      //获取评论
      if(data.rate.cRate !=0){
        this.DetailCommonInfo = data.rate.list[0]
        // console.log(this.DetailCommonInfo);
      }
      //获取推荐信息
      getRecommend().then(res =>{
        this.GetRecommend =res.data.list
              // console.log(res.data.list);
      });

    })

  },
  mounted() {
    // this.$bus.$on('itemImageLoad',() =>{
    //   this.$refs.scroll.refresh()
    // })
  },
  // updated() {
  //
  // },
  methods:{
    debounce (func,delay) {   //防抖函数
      let timer = null
      return function (...args) {
        if (timer) clearTimeout(timer);
        timer = setTimeout( () =>{
          func.apply(this,args)
        },delay)
      }
    },


    more () {
      this.$refs.scroll.refresh()

      //将标题对应的内容高度存放
      this.narbarback = []
      this.narbarback.push(0)
      this.narbarback.push(this.$refs.params.$el.offsetTop)
      this.narbarback.push(this.$refs.common.$el.offsetTop)
      this.narbarback.push(this.$refs.recommend.$el.offsetTop )
      this.narbarback.push(Number.MAX_VALUE)
      // console.log(this.narbarback);

    },

    //滚回顶部
    backtop () {
      this.$refs.scroll.scrollTo(0,0,600)
    },

    //点击标题，内容到相应的位置
    itemClick (index){
     this.$refs.scroll.scrollTo(0,-this.narbarback[index],600)
      // console.log(index);
      this.currentIndex = index;
    },

    //内容滚动，对应到相应的标题
    position (position) {
      const positiony = - position.y
      // console.log(positiony);
      const length = this.narbarback.length
      for(let i= 0; i < length-1;i++){
        if(this.currenIndex !==i &&(positiony >= this.narbarback[i] && positiony< this.narbarback[i+1])){
          this.currenIndex = i
          this.$refs.nav.currentIndex = this.currenIndex
        }
      }
    },

    //点击加入购物车
    addcart () {
     let addinfo = {}
      addinfo.iid = this.iid
      addinfo.img = this.topImage[0]
      addinfo.title = this.GoodsInfo.title
      addinfo.price = this.GoodsInfo.realprice
      this.$store.dispatch('addCart',addinfo)
    }
  },

}
</script>

<style scoped>
.detail{
  height: 100vh;
  position: relative;
  z-index: 99;
}
.content{
  background-color: #fff;
  height: calc(100% - 44px );
  overflow: auto;
}
#datailimages{

  border-bottom: 1px black solid;
}
</style>